<template>
    <div class="popular-playlist">
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=1"
            name="流行金曲"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=2"
            name="经典老歌"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=3"
            name="摇滚精选"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=4"
            name="民谣时光"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=5"
            name="运动节拍"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=6"
            name="浪漫情歌"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=7"
            name="工作专注"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=8"
            name="旅行路上"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=9"
            name="咖啡时光"
        />
        <PlaylistCard 
            coverUrl="https://picsum.photos/200/200?random=10"
            name="深夜电台"
        />
    </div>
</template>

<script setup>
import PlaylistCard from '@/components/home/PopularPlaylist/PlaylistCard.vue';
import { ref } from 'vue';

</script>

<style scoped>
.popular-playlist {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    padding-right: 20px;
}
</style>